<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>JetCar 智能控制面板（6方向+摄像头）</title>
    <link rel="stylesheet" href="/css/style.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            padding: 10px;
            background: #f5f5f5;
        }
        
        .camera-area h2 {
            text-align: center;
            margin-bottom: 15px;
            color: #333;
        }
        
        .camera-container {
            width: 100%;
            height: 70vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            background: #000;
            border-radius: 12px;
        }
        
        .camera-feed {
            /* 初始状态：确保不被拉伸 */
            object-fit: contain;
            display: block;
            
            /* 横屏默认：高度填满，宽度自适应 */
            height: 100%;
            width: auto;
        }
        
        .camera-status {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.85);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            z-index: 10;
            pointer-events: none;
        }
        
        /* 竖屏模式：宽度填满，高度自适应 */
        @media (orientation: portrait) {
            .camera-feed {
                width: 100% !important;
                height: auto !important;
            }
        }
        
        /* 横屏模式：高度填满，宽度自适应（默认就是这个，但明确声明） */
        @media (orientation: landscape) {
            .camera-feed {
                width: auto !important;
                height: 100% !important;
            }
        }
        
        /* 小屏幕优化 */
        @media (max-width: 480px) {
            .camera-container {
                height: 60vh;
            }
        }
    </style>

</head>
<body>
    <div class="container">
        <!-- 头部信息 -->
        <header class="header">
            <h1>🚗 JetCar 控制面板</h1>
            <p>按住方向按钮执行 | 松开/移开自动停止</p>
        </header>

        <!-- 摄像头画面 -->
        <section class="camera-area">
            <h2>📹 实时画面</h2>
            <div class="camera-container">
                <img 
                    id="camera-feed" 
                    class="camera-feed"
                    alt="实时摄像头" 
                    onload="handleCameraLoad()"
                    onerror="handleCameraError()"
                    src="http://你的摄像头地址/camera" 
                />
                <p id="camera-status" class="camera-status">🔄 摄像头加载中...</p>
            </div>
        </section>

        

        <!-- 核心控制区域（空间布局） -->
        <section class="control-area">
            <h2>🎮 方向控制</h2>
            <div class="direction-pad">
                <!-- 第一行：左前、前进、右前 -->
                <button class="dir-btn" data-dir="3" ontouchstart="startAction(event, 3)" onclick="startAction(event, 3)" ontouchend="stopAction()" ontouchcancel="stopAction()">左前 ↖️</button>
                <button class="dir-btn" data-dir="1" ontouchstart="startAction(event, 1)" onclick="startAction(event, 1)" ontouchend="stopAction()" ontouchcancel="stopAction()">前进 ⬆️</button>
                <button class="dir-btn" data-dir="4" ontouchstart="startAction(event, 4)" onclick="startAction(event, 4)" ontouchend="stopAction()" ontouchcancel="stopAction()">右前 ↗️</button>

                <!-- 第二行：左后、停止、右后 -->
                <button class="dir-btn" data-dir="5" ontouchstart="startAction(event, 5)" onclick="startAction(event, 5)" ontouchend="stopAction()" ontouchcancel="stopAction()">左后 ↙️</button>
                <button class="dir-btn stop-btn" onclick="stopAction()">紧急停止 🛑</button>
                <button class="dir-btn" data-dir="6" ontouchstart="startAction(event, 6)" onclick="startAction(event, 6)" ontouchend="stopAction()" ontouchcancel="stopAction()">右后 ↘️</button>

                <!-- 第三行：后退 -->
                <button class="dir-btn back-btn" data-dir="2" ontouchstart="startAction(event, 2)" onclick="startAction(event, 2)" ontouchend="stopAction()" ontouchcancel="stopAction()">后退 ⬇️</button>
   
            </div>

            <!-- 速度调节区域 -->
            <div class="speed-control">
                <h3>⚡ 速度调节（<span id="speed-range">0-100</span>）</h3>
                <input type="range" id="speed-slider" min="0" max="100" value="50" oninput="updateSpeedDisplay(this.value)">
                <span id="speed-display">50</span>
                <button class="confirm-btn" onclick="confirmSpeed()">确认速度</button>
            </div>
        </section>

        <!-- 状态显示区域 -->
        <section class="status-area">
            <div class="status-card">
                <h2>🎯 目标设置</h2>
                <div class="status-item">
                    <span class="label">目标速度：</span>
                    <span class="value" id="target-speed">50</span>
                </div>
                <div class="status-item">
                    <span class="label">当前方向：</span>
                    <span class="value" id="current-direction">停止</span>
                </div>
            </div>
            <div class="status-card">
                <h2>📊 电机反馈</h2>
                <div class="status-item">
                    <span class="label">左轮速度：</span>
                    <span class="value" id="left-speed">0</span>
                </div>
                <div class="status-item">
                    <span class="label">右轮速度：</span>
                    <span class="value" id="right-speed">0</span>
                </div>
                <div class="status-item detailed">
                    <span class="label">详细状态：</span>
                    <span class="value" id="detailed-status">停止（左轮：0 | 右轮：0）</span>
                </div>
            </div>
        </section>
        
        <!-- 操作日志区域 -->
        <section class="log-area">
            <h2>🗣️ 操作日志</h2>
            <div id="log-container">
                <p>等待操作...</p>
            </div>
        </section>
    </div>

    <script src="/js/control.js"></script>

    <!-- 🔴 新增轮询脚本（放在HTML底部</body>前） -->
    <script>
        // 每100ms请求一次单帧（10fps，可调整）
        const pollInterval = 100; // 单位：毫秒，越小越流畅（最小50ms=20fps）
        const cameraImg = document.getElementById('camera-feed');
        const baseUrl = window.location.origin; // 自动获取当前IP和端口（无需手动改）
        
        // 定时请求新帧
        setInterval(() => {
            // 加随机数参数：彻底避免浏览器缓存
            const random = Math.random().toString(36).substring(2, 10);
            cameraImg.src = `${baseUrl}/camera_single?rand=${random}`;
        }, pollInterval);
        </script>

    <!-- 🔴 摄像头画面居中 -->
    <script>
        // 智能方向检测和适配
        function smartOrientationAdapt() {
            const img = document.getElementById('camera-feed');
            const container = document.querySelector('.camera-container');
            
            if (!img.naturalWidth || !img.naturalHeight) {
                setTimeout(smartOrientationAdapt, 100);
                return;
            }
            
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            const isLandscape = containerWidth > containerHeight;
            
            console.log('方向适配:', {
                模式: isLandscape ? '横屏(高度填满)' : '竖屏(宽度填满)',
                容器尺寸: `${containerWidth}×${containerHeight}`,
                图片尺寸: `${img.naturalWidth}×${img.naturalHeight}`
            });
            
            if (isLandscape) {
                // 横屏：高度填满，宽度自适应
                img.style.width = 'auto';
                img.style.height = '100%';
            } else {
                // 竖屏：宽度填满，高度自适应
                img.style.width = '100%';
                img.style.height = 'auto';
            }
        }
        
        function handleCameraLoad() {
            const status = document.getElementById('camera-status');
            status.textContent = '✅ 实时画面传输中';
            status.style.background = 'rgba(34, 197, 94, 0.9)';
            
            // 立即应用智能适配
            smartOrientationAdapt();
            
            // 确保完全加载后再适配一次
            setTimeout(smartOrientationAdapt, 200);
        }
        
        function handleCameraError() {
            const status = document.getElementById('camera-status');
            status.textContent = '❌ 摄像头连接失败';
            status.style.background = 'rgba(239, 68, 68, 0.9)';
        }
        
        // 监听窗口变化
        let resizeTimer;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(smartOrientationAdapt, 100);
        });
        
        // 监听设备方向变化
        window.addEventListener('orientationchange', () => {
            setTimeout(smartOrientationAdapt, 300);
        });
        
        // 初始适配
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(smartOrientationAdapt, 300);
        });
        </script>

< script>
    function handleCameraLoad() {
        const status = document.getElementById('camera-status');
        status.textContent = '✅ 实时画面传输中';
        status.style.background = 'rgba(34, 197, 94, 0.8)';
        
        // 移动端可能需要重新计算布局
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'));
            }, 200);
        }
    }

    function handleCameraError() {
        const status = document.getElementById('camera-status');
        status.textContent = '❌ 摄像头连接失败';
        status.style.background = 'rgba(239, 68, 68, 0.8)';
    }

    // 监听方向变化
    window.addEventListener('orientationchange', function() {
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 300);
    });
    </script >


</body>
</html>